<template>
	<view class="container">
		<view class="userinfo">
			<view>
				<view class="phone">18888888888</view>
				<view>会员积分：4502.9</view>
				<view>普通会员</view>
			</view>
			<image src="../../static/user.png" mode=""></image>
		</view>
		<view class="list">
			<view class="tab">
				<view v-for="(item,i) in navData" :class="currentIndex===i?'current':''" @click="changeIndex(i)">
					{{item}}
				</view>
			</view>
			<div class="item">
				<image src="../../static/p1.png" mode=""></image>
				<view>
					<view>下单时间：2024-01-11 22:25:20</view>
					<view>订单总额：￥34.0</view>

				</view>
			</div>
			<div class="item">
				<image src="../../static/p2.png" mode=""></image>
				<view>
					<view>下单时间：2024-01-11 22:27:20</view>
					<view>订单总额：￥38.0</view>

				</view>
			</div>
			<div class="item">
				<image src="../../static/p3.png" mode=""></image>
				<view>
					<view>下单时间：2024-01-11 22:29:20</view>
					<view>订单总额：￥40.0</view>

				</view>
			</div>
			<div class="item">
				<image src="../../static/p4.png" mode=""></image>
				<view>
					<view>下单时间：2024-01-11 23:10:20</view>
					<view>订单总额：￥42.0</view>

				</view>
			</div>
			<div class="item">
				<image src="../../static/p5.png" mode=""></image>
				<view>
					<view>下单时间：2024-01-11 23:25:20</view>
					<view>订单总额：￥36.0</view>

				</view>
			</div>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navData: ["全部订单", "已收货", "未收货", "退订"],
				//点击切换
				currentIndex: 0,
			}
		},
		methods: {
			changeIndex(index) {
				this.currentIndex = index
			}
		}
	}
</script>

<style scoped>
	.userinfo {
		height: 260rpx;
		background: orange;
		padding: 50rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.userinfo view {
		line-height: 55rpx;
		color: #999;
	}

	.userinfo image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.userinfo .phone {
		color: #fff;
		font-weight: bold;
	}

	.list {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.tab {
		/* margin-top: 30rpx; */
		display: flex;
		justify-content: space-between;
		height: 70rpx;
		align-items: center;
	}

	.tab view {
		border-bottom: 1px solid #f5f5f5;
	}

	.tab .current {
		/* box-sizing: border-box; */
		border-bottom: 1px solid #000;
	}

	.item {
		display: flex;
		/* justify-content: space-between; */
		padding: 15rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #000;
		align-items: center;
	}

	.item image {
		width: 200rpx;
		height: 150rpx;
		/* margin: 10rpx */
	}

	.item view {
		line-height: 50rpx;
	}

	.container {
		background: #f5f5f5;
	}
</style>